<template>
<a-spin :spinning="loading">
  <div class="card-content-area" :class="id"  v-if="barData && barData.length">
    <div class="chart-box" :id="id"></div>
  </div>
  <div class="card-content-area" v-else>
    <a-empty  description="暂无数据" class="nodata" style="margin-top: 20px"/>
  </div>
</a-spin>
</template>
<script>
export default {
  props: {
    allLength: {
      type: Number,
      default: 100
    },
    id: {
      type: String,
      default: ""
    },
    chartData: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartType: {
      type: String,
      default: "pie"
    },
    titleData: {
      type: Array,
      default: () => {
        return ["标题1","标题2"]
      }
    },
    barData: {
      type: Array,
      default: () => {
        return  [
          {
            name: "产品开发",
            blue: 15,
            green: 32,
            yellow: 18
          },
          {
            name: "关键零部件",
            blue: 22,
            green: 26,
            yellow: 28
          },
          {
            name: "技术研究与开发",
            blue: 29,
            green: 32,
            yellow: 42
          },
          {
            name: "软件开发",
            blue: 15,
            green: 32,
            yellow: 34
          },
          {
            name: "研发能力提升",
            blue: 19,
            green: 18,
            yellow: 32
          },
          {
            name: "重品项目",
            blue: 35,
            green: 52,
            yellow: 13
          },
        ]
      }
    }
  },
  data() {
    return {
      toolData: [ "未创建项目数","已全部关闭项目数","未全部关闭项目数" ],
      color: ["#3ca0ff","#4ccb72","#fad336"],
      axias: [],
      loading: false
    }
  },
  mounted() {
    // this.deal(this.barData)  
  },
  watch: {
    barData: {
      handler(v) {
        this.loading = false
        if(v && v.length) {
          this.$nextTick(function() {
            this.deal(this.barData)
          })
        }
      },
      deep: true,
    },
  },
  methods: {
    deal(data) {
      const axias = [],chartData = [],blueData =[],greenData=[],yellowData=[],_this=this
      data.map(function(item) {
        axias.push(item.name)
        blueData.push(item.blue)  
        greenData.push(item.green)  
        yellowData.push(item.yellow)
      })
      this.$set(this,"axias",axias)
      this.toolData.map(function(itm,idx) {
        const obj = {
          name : itm,
          type : 'bar',
          color : _this.color[idx],
          barWidth : 10
        }
        switch (itm) {
          case '未创建项目数':
            obj.data = blueData
            break;
          case '已全部关闭项目数':
            obj.data = greenData
            break;
          case '未全部关闭项目数':
            obj.data = yellowData
            break;
          default:
            break;
        }
        chartData.push(obj)
      })
      this.drawChart(chartData,this.id)

    },
    getDateToFixed(data) {
      return (data.value / this.allLength * 100 ).toFixed(2) 
    },
    drawChart (data,id) {
      let width = document.querySelector('.partTwo').offsetWidth * .67 + 'px'
      let height = document.querySelector('.partTwo').offsetHeight - 36 + 'px'
      let cahrtDom = document.getElementById(id)
      let myChart = this.$echarts.init(cahrtDom)
      // myChart.getDom().style.height = 200+"px"
      let option = {
        grid: {
          top: 50,
          right: 60,
          left: 70,
          bottom: 30
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.toolData,
          itemGap:40,
          itemWidth:10,
          itemHeight:10,
          padding:[20,0,0,0],
          textStyle:{
            color: "#999"
          }
        },
        calculable : true,
        xAxis : [{
          type : 'category',
          data : this.axias,
          axisLine: {
            lineStyle: {
              type: 'solid',
              // color: '#E8ECEF',
              color: '#D7D7D7',//左边线的颜色
              width:1, //坐标线的宽度
            }
          },
          axisLabel: {
                interval: 0,
                rotate: 0,
                formatter:function(params) {
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = data.length < 6 ? 6 : 5 ;  //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        } 
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                },
            textStyle: {
              color: '#999999',//坐标值得具体的颜色
            }
          }
        }],
        yAxis : [{
          type: 'value',
          axisLine:{
            show:false,
            lineStyle:{
              color: ['#E8ECEF'],
              width: 1,
              type: 'solid'
            }
          },
          axisTick:{
            show:false
          },
          splitLine:{
            show:true,
            lineStyle:{
              color: ['#E8ECEF'],
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#595959'
            }
          }
        }],
        series : data
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      myChart.resize( {
        width,
        height
      })
    //   window.onresize = function () {
    //     myChart.resize()
    //   }
    },
  }
    
}
</script>
<style lang="less" scoped>
 .card-content-area {
    width: 100%;
    position: relative;
    height: calc( 100% - 40px);
    .chart-box {
      height: 100%;
    }
  }

</style>